<!--
 * @Descripttion: 交班账单右边卡片
-->

<template>
  <div class="handover-card-box" :class="selectHandOverOrder ? 'show' : 'hide'">
    <div class="flex-col" style="width: 100%">
      <span class="font_6 text_15">收银交班单</span>
      <div class="flex-row justify-between items-center group_17">
        <span class="font_8">交班单号：</span>
        <span class="font_9">{{
          fetchObjectDeepAttrValue(workLogTicketDetailData, 'ticket_id', '无')
        }}</span>
      </div>
      <div class="flex-col">
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">营业日期：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.work_day',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">开班时间：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.start_time',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">交班时间：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.end_time',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">交班人：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.clerk_name',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">账单数：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.bill_count',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">开台数量：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.record_count',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">单均消费：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.avg_bill_amount',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">桌均消费：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.avg_record_amount',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">消费人数：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.customer_count',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">人均消费：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.avg_customer_amount',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">收银站点：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.computer_name',
              '无'
            )
          }}</span>
        </div>
      </div>
      <div class="space-x-line"></div>
      <span class="font_8 text_70">交班统计</span>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">消费合计</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.shiftSummary.pay_total', '0')
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">会员充值</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftSummary.recharge_total',
              '0'
            )
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">会员消费</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftSummary.vip_pay_total',
              '0'
            )
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">收入合计</span>
        <span class="font_9">{{
          fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.shiftSummary.income_total', '0')
        }}</span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">退菜合计</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.shiftSummary.back_total', '0')
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">赠送合计</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftSummary.present_total',
              '0'
            )
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">备用金</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftSummary.reserve_before',
              '0'
            )
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">应交金额</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftSummary.reserve_after',
              '0'
            )
          }}
        </span>
      </div>
      <template>
        <div class="space-x-line"></div>
        <span class="font_8 text_70">大类销售汇总</span>
        <div class="dgrid group_65">
          <span class="font_8">大类</span>
          <span class="font_8">金额</span>
          <span class="font_8">数量</span>
          <span class="font_8">退菜</span>
          <span class="font_8">赠送</span>
        </div>
        <div class="space-x-line"></div>
        <div class="dgrid group_62" v-for="(item, index) in categorySales">
          <span class="font_8">{{ item.category }}</span>
          <span class="font_8">{{ item.money }}</span>
          <span class="font_8">{{ item.num }}</span>
          <span class="font_8">{{ item.back_num || 0 }}</span>
          <span class="font_8">{{ item.present_num || 0 }}</span>
        </div>
      </template>
      <span class="font_8 text_70">销售类目汇总</span>
      <div class="dgrid dgrid3 group_65">
        <span class="font_8">类目</span>
        <span class="font_8">部门出品数量</span>
        <span class="font_8">销售流水</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid3 group_62" v-for="(item, index) in foodCategorySales">
        <span class="font_8">{{ item.category }}</span>
        <span class="font_8">{{ item.num }}</span>
        <span class="font_8">{{ item.money }}</span>
      </div>
      <span class="font_8 text_106">账单明细</span>
      <div class="flex-row justify-between items-center group_65">
        <span class="font_8">账单</span>
        <span class="font_8">消费金额</span>
      </div>
      <div class="space-x-line"></div>
      <div
        class="flex-row justify-between items-center group_62"
        v-for="(item, index) in invoiceDetails"
      >
        <span class="font_8">{{ item.order_id }}</span>
        <span class="font_8">{{ item.money }}</span>
      </div>

      <span class="font_8 text_106">支付方式汇总</span>
      <div class="dgrid dgrid3 group_65">
        <span class="font_8">付款方式</span>
        <span class="font_8">笔数</span>
        <span class="font_8">金额</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid3 group_62" v-for="(item, index) in payTypeSummary">
        <span class="font_8">{{ item.client }}</span>
        <span class="font_8">{{ item.num }}</span>
        <span class="font_8">{{ item.money }}</span>
      </div>

      <span class="font_8 text_106">实收</span>
      <div class="dgrid dgrid3 group_65">
        <span class="font_8">支付方式</span>
        <span class="font_8">笔数</span>
        <span class="font_8">金额</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid3 group_62" v-for="(item, index) in realPayTypeSummary">
        <span class="font_8">{{ item.client }}</span>
        <span class="font_8">{{ item.num }}</span>
        <span class="font_8">{{ item.money }}</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid3 group_62">
        <span class="font_8">合计</span>
        <span class="font_8">2</span>
        <span class="font_8">2</span>
      </div>

      <span class="font_8 text_106">虚收</span>
      <div class="dgrid dgrid3 group_65">
        <span class="font_8">支付方式</span>
        <span class="font_8">笔数</span>
        <span class="font_8">金额</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid3 group_62" v-for="(item, index) in virtualPayTypeSummary">
        <span class="font_8">{{ item.client }}</span>
        <span class="font_8">{{ item.num }}</span>
        <span class="font_8">{{ item.money }}</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid3 group_62">
        <span class="font_8">合计</span>
        <span class="font_8">2</span>
        <span class="font_8">2</span>
      </div>

      <span class="font_8 text_106">台区消费汇总</span>
      <div class="flex-row justify-between items-center group_65">
        <span class="font_8">台区类型</span>
        <span class="font_8">台区合计金额</span>
      </div>
      <div class="space-x-line"></div>
      <div
        class="flex-row justify-between items-center group_62"
        v-for="(item, key) in regionSummary"
        :key="item"
      >
        <span class="font_8">{{ item.region }}</span>
        <span class="font_8">{{ item.money }}</span>
      </div>

      <span class="font_8 text_70">充值明细</span>
      <div class="dgrid dgrid4 group_65">
        <span class="font_8">充值类目</span>
        <span class="font_8">付款方式</span>
        <span class="font_8">笔数</span>
        <span class="font_8">金额</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid4 group_62" v-for="item in rechargeList">
        <span class="font_8">{{ item.plan_name }}</span>
        <span class="font_8">{{ item.payment }}</span>
        <span class="font_8">{{ item.num }}</span>
        <span class="font_8">{{ item.money }}</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid4 group_62">
        <span class="font_8">合计</span>
        <span class="font_8"></span>
        <span class="font_8">2</span>
        <span class="font_8"
          >{{
            fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.rechargeDetails.total', '0')
          }}
        </span>
      </div>

      <span class="font_8 text_70">挂账明细</span>
      <div class="dgrid dgrid4 group_65">
        <span class="font_8">类型</span>
        <span class="font_8">挂账账户</span>
        <span class="font_8">金额</span>
        <span class="font_8">操作人</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid4 group_62" v-for="item in accountReceivablesDetails">
        <span class="font_8">{{ item.type }}</span>
        <span class="font_8">{{ item.name }}</span>
        <span class="font_8">{{ item.money }}</span>
        <span class="font_8">{{ item.clerk }}</span>
      </div>

      <span class="font_8 text_70">挂账回款明细</span>
      <div class="dgrid dgrid4 group_65">
        <span class="font_8">回款账户</span>
        <span class="font_8">回款方式</span>
        <span class="font_8">回款单号</span>
        <span class="font_8">操作人</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid4 group_62" v-for="item in repaymentDetails">
        <span class="font_8">{{ item.name }}</span>
        <span class="font_8">{{ item.payment }}</span>
        <span class="font_8">{{ item.log_id }}</span>
        <span class="font_8">{{ item.clerk }}</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid4 group_62">
        <span class="font_8">合计</span>
        <span class="font_8"></span>
        <span class="font_8"></span>
        <span class="font_8">
          {{
            fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.repaymentDetails.total', '0')
          }}
        </span>
      </div>

      <span class="font_8 text_106">反结账记录</span>
      <div class="dgrid dgrid3 group_65">
        <span class="font_8">反结单号</span>
        <span class="font_8">反结人</span>
        <span class="font_8">金额</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid3 group_62" v-for="item in reverseBillingRecords">
        <span class="font_8">{{ item.order_id }}</span>
        <span class="font_8">{{ item.clerk }}</span>
        <span class="font_8">{{ item.sub_money }}</span>
      </div>
      <div class="space-x-line"></div>
      <div class="dgrid dgrid3 group_62">
        <span class="font_8">合计</span>
        <span class="font_8"></span>
        <span class="font_8">
          {{
            fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.repaymentDetails.total', '0')
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_30">
        <span class="font_8">备用金</span>
        <span class="font_9">
          {{ fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.reserveFund', '0') }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_62">
        <span class="font_8">交班人签字：</span>
      </div>
      <div class="flex-row justify-between items-center group_62">
        <span class="font_8">审核人签字：</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { workLogTicketDetail, fetchTrcket } from '@/api/desktop'
import { dealAssignDataFunction, fetchObjectDeepAttrValue } from '@/utils/toolsValidate'

// 定义props
const props = defineProps({
  checkedList: {
    type: Array,
    default: () => []
  }
})

// 状态管理
const store = useStore()

// 响应式数据
const workLogTicketDetailData = ref(null)
const showDetailsEnum = reactive({
  isShowRechargeDetails: true,
  isShowCollectionDetails: true,
  isShowSettleAccountsDetails: true,
  isShowBillDetails: true,
  isShowCreditDetails: true,
  isShowRecordDetails: true
})

// 计算属性
const selectHandOverOrder = computed(() => store.getters.selectHandOverOrder)
const rechargeList = computed(() =>
  fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.rechargeDetails.list', [])
)
const repaymentDetails = computed(() =>
  fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.repaymentDetails.list', [])
)
const reverseBillingRecords = computed(() =>
  fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.reverseBillingRecords.list', [])
)
const foodCategorySales = computed(() =>
  fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.foodCategorySales', [])
)
const categorySales = computed(() =>
  fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.categorySales', [])
)
const invoiceDetails = computed(() =>
  fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.invoiceDetails', [])
)
const payTypeSummary = computed(() =>
  fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.payTypeSummary', [])
)
const realPayTypeSummary = computed(() =>
  fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.realPayTypeSummary', [])
)
const virtualPayTypeSummary = computed(() =>
  fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.virtualPayTypeSummary', [])
)
const regionSummary = computed(() =>
  fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.regionSummary', {})
)
const accountReceivablesDetails = computed(() =>
  fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.accountReceivablesDetails', [])
)

// 监听选中的id变化
watch(
  () => selectHandOverOrder.value?.shift_id,
  newV => {
    if (newV) {
      getWorkLogTicketDetail(newV)
    }
  },
  { immediate: true, deep: true }
)

// 方法定义
function getWorkLogTicketDetail(id) {
  const datas = {
    shift_id: id
  }
  workLogTicketDetail(datas).then(res => {
    if (res.status === 200) {
      console.log('res=======', res)
      workLogTicketDetailData.value = dealAssignDataFunction(null, res?.data?.res)
    } else {
      workLogTicketDetailData.value = null
      store.commit('updateSelectHandOverOrder', null)
    }
  })
}

function fetchTrcket() {
  workLogTicketDetailData.value = null
  getTrcket().then(res => {
    if (res.status === 200) {
      workLogTicketDetailData.value = dealAssignDataFunction(null, res?.data?.res)
    } else {
      workLogTicketDetailData.value = null
    }
  })
}
</script>

<style lang="scss" scoped>
.hide {
  display: none !important;
  transition: all 1s !important;
}
.show {
  display: block;
  width: 420px;
  transition: all 1s;
}
.handover-card-box {
  width: 420px;
  height: 1000px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16);
  border: 1px solid #e2e2e2;
  box-sizing: border-box;
  padding: 30px;
  overflow-y: scroll;
  transition: all 1s !important;

  .title {
    font-size: 20px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
  }
  .description {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin: 10px 0;
  }
  .discount-summary {
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin-top: 20px;
  }
  .desc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    color: #333333;
    .left-box {
      width: 33%;
      display: flex;
      justify-content: flex-start;
    }
    .center-box {
      width: 33%;
      display: flex;
      justify-content: center;
    }
    .right-box {
      width: 33%;
      display: flex;
      justify-content: flex-end;
    }
    .vip-name-box {
      width: 25%;
      display: flex;
      justify-content: flex-start;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
    }

    .card-number-box {
      width: 25%;
      display: flex;
      justify-content: center;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
    }
    .recharge-method-box {
      width: 25%;
      display: flex;
      justify-content: flex-end;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
    }
    .price-box {
      width: 25%;
      display: flex;
      justify-content: flex-end;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
    }
  }
  .recharge-list-item {
    display: flex;
    margin-top: 11px;
    // justify-content: space-between;
    .rechage-name {
      width: 25%;
      display: flex;
      justify-content: flex-start;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
    }
    .recharge-num {
      width: 25%;
      display: flex;
      justify-content: center;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
    }
    .recharge-type {
      width: 25%;
      display: flex;
      justify-content: center;
      padding-left: 35px;
      box-sizing: border-box;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
    }
    .recharge-price {
      width: 25%;
      display: flex;
      justify-content: flex-end;
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
    }
  }
  .recharge-detail {
    text-align: center;
    margin-top: 11px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    color: #333333;
  }
  .receive {
    text-align: center;
    margin-top: 11px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    color: #333333;
  }
  .desc-line {
    width: 360px;
    height: 1px;
    background: #e2e2e2;
    margin-top: 10px;
  }
  .desc-title {
    font-size: 16px;
    font-family:
      PingFang SC,
      PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #333333;
    margin: 20px 0 10px 0;
  }
  .address-phone-box {
    margin-top: 50px;
    font-size: 14px;
    font-family:
      PingFang SC,
      PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #333333;
    line-height: 24px;
    > div {
      margin-bottom: 10px;
    }
  }
}
//滚动条整体的大小
.handover-card-box::-webkit-scrollbar {
  width: 6px !important;
  height: 0 !important;
}
//滚动条里滑动的滑块
.handover-card-box::-webkit-scrollbar-thumb {
  height: 200px !important;
  background: #d2d2d2 !important;
  border-radius: 3px !important;
}
//滚动条底层样式
.handover-card-box::-webkit-scrollbar-track {
  display: none !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-around {
  justify-content: space-around;
}

.justify-between {
  justify-content: space-between;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}
.text_15 {
  align-self: center;
  color: #353535;
}
.text_70 {
  margin-top: 20px;
  align-self: center;
}
.font_5 {
  font-size: 18px;
  font-family: PingFang SC Regular;
  color: #333333;
}
.font_2 {
  font-size: 14px;
  font-family: PingFang SC Regular;
  color: #333333;
}
.space-x-line {
  margin-top: 10px;
  width: 100%;
  border-top: solid 1px #e2e2e2;
}
.font_6 {
  font-size: 20px;
  font-family: PingFang SC Bold;
  font-weight: 700;
}
.font_8 {
  font-size: 14px;
  font-family: PingFang SC Bold;
  font-weight: 700;
  color: #333333;
}
.font_9 {
  font-size: 14px;
  font-family: PingFang SC Bold;
  font-weight: 700;
  color: #333333;
}
.group_17 {
  margin-top: 20px;
}
.group_18 {
  margin-top: 10px;
}
.group_49 {
  margin-top: 10px;
  padding-top: 20px;
  border-top: solid 1px #e2e2e2;
}
.group_59 {
  margin-top: 10px;
  padding: 10px 0;
  border-top: solid 1px #e2e2e2;
  border-bottom: solid 1px #e2e2e2;
}
.group_60 {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px #e2e2e2;
}
.group_62 {
  margin-top: 10px;
}
.group_65 {
  margin-top: 20px;
}
.group_30 {
  margin-top: 30px;
}
.group_64 {
  margin-top: 10px;
  padding: 10px 0;
  border-top: solid 1px #e2e2e2;
  border-bottom: solid 1px #e2e2e2;
}
.text_101 {
  margin-top: 12px;
  align-self: center;
}
.text_106 {
  margin-top: 20px;
  align-self: center;
}
.text-wrapper_16 {
  align-self: center;
  padding-top: 10px;
  margin-top: 10px;
  width: 100%;
  border-top: solid 1px #e2e2e2;
}
.dgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  > span:last-child {
    text-align: right;
  }
  > span:first-child {
    text-align: left;
  }
}
.dgrid3 {
  grid-template-columns: repeat(3, 1fr);
}
.dgrid4 {
  grid-template-columns: repeat(4, 1fr);
}
</style>
